<template>
    <div id="line">
        <h2>物流线路管理列表</h2>
        <el-dialog title="物流线路" :visible.sync="dialogFormVisible">
            <el-form :model="lineForm" style="width: 70%;">
                <el-form-item label="线路名称" :label-width="formLabelWidth">
                    <el-input v-model="lineForm.lineName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="途径" :label-width="formLabelWidth">
                    <el-input v-model="lineForm.lineWay" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="lineForm.lineAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="lineForm.telephone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth">
                    <el-button type="primary" v-if="isAdd" @click="addForm('form')" style="width:80%">提交</el-button>
                    <el-button type="primary" v-else="isAdd" @click="changelineList()" style="width:80%">修改</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-row style="display: flex;justify-content: flex-start;">
            <el-button type="primary" plain @click="addLine">添加物流线路</el-button>
            <el-col :span="6" style=" margin-left: 45vw;width: 270px; hight: 40px;">
                <el-input type="text" prefix-icon="el-icon-search" v-model="search" placeholder="请输入"
                    style="width: 270px; cursor: pointer"></el-input>
            </el-col>
            <el-button id="scope.row.lineId" type="primary" @click="searchlineList()">搜索</el-button>
        </el-row>
        <el-table :data="lineList" style="width: 100%" @click="getlineList">
            <el-table-column prop="lineName" label="线路名称">
            </el-table-column>
            <el-table-column prop="lineWay" label="途径">
            </el-table-column>
            <el-table-column prop="lineAddress" label="地址">
            </el-table-column>
            <el-table-column prop="telephone" label="电话">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button id="scope.row.lineId" type="primary" plain
                        @click="toplineList(scope.row.lineId)">置顶</el-button>
                    <el-button id="scope.row.lineId" type="primary" plain @click="editlineList(scope.row)">编辑</el-button>
                    <el-button id="scope.row.lineId" type="danger" @click="dellineList(scope.row.lineId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :page-size="5" :current-page="currentPage"
                layout=" prev, pager, next" :total="length">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
import myaxios from '../components/axios';
export default {
    data() {
        return {
            lineList: [],
            dialogFormVisible: false,
            lineForm: {
                lineId: '',
                lineName: '',
                lineWay: '',
                lineAddress: '',
                telephone: ''
            },
            isAdd: true,
            formLabelWidth: '100px',
            search: '',
            index: 0,
            length: 5,
            size: 5,
            currentPage: 1
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            console.log(this.length);
            this.getlineList();
        },
        addLine() {
            this.dialogFormVisible = true;
            this.isAdd = true;
            this.lineForm.lineId = '';
            this.lineForm.lineName = '';
            this.lineForm.telephone = '';
            this.lineForm.lineWay = '';
            this.lineForm.lineAddress = '';
        },
        editlineList(row) {
            this.dialogFormVisible = true;
            console.log(row);
            this.lineForm.lineId = row.lineId;
            this.lineForm.lineName = row.lineName;
            this.lineForm.lineWay = row.lineWay;
            this.lineForm.telephone = row.telephone;
            this.lineForm.lineAddress = row.lineAddress;
            this.isAdd = false;
        },
        async getlineList() {
            await myaxios.get("/lineList", { params: { size: this.size, page: this.currentPage } })
                .then(res => {
                    this.lineList = res.data.lineList;
                    this.length = res.data.length;
                })
            console.log(this.isAdd);
        },
        async addForm() {
            await myaxios.post("/addLine",
                { lineName: this.lineForm.lineName, lineWay: this.lineForm.lineWay, lineAddress: this.lineForm.lineAddress, telephone: this.lineForm.telephone })
                .then(res => {
                    console.log(this.lineForm)
                    if (res.data.code == 200) {
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        })
                        this.lineList = res.data.lineList;
                    }
                }).catch(error => {
                    this.$message.error('添加失败！');
                })
            this.getlineList();
        },
        async dellineList(id) {
            console.log(id);
            await myaxios.delete("/delLine" + id)
                .then(res => {
                    this.lineList = res.data;
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }).catch(error => {
                    this.$message.error('删除失败！');
                })
            this.getlineList();
        },
        async changelineList() {
            await myaxios.post("/changeLine",
                { lineId: this.lineForm.lineId, lineName: this.lineForm.lineName, lineWay: this.lineForm.lineWay, lineAddress: this.lineForm.lineAddress, telephone: this.lineForm.telephone })
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        })
                        this.lineList = res.data.lineList;
                    }
                }).catch(error => {
                    this.$message.error('修改失败！');
                })
            this.getlineList();
        },
        async searchlineList() {
            if (this.search) {
                await myaxios.get("/searchLine", { params: { content: this.search } })
                    .then(res => {
                        console.log(res);
                        this.lineList = res.data.lineList;
                        this.length = this.lineList.length;
                    })
            } else {
                this.getlineList();
            }
        },
        async toplineList(id) {
            await myaxios.get("/topLine" + id)
                .then(res => {
                    console.log(res);
                    this.lineList = res.data.lineList.splice(this.size * (this.currentPage - 1), this.size * this.currentPage);
                })
        },
    },
    mounted() {
        this.getlineList();
    }
};
</script>
  
<style>
#line {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    margin-left: 10;
}

.el-row {
    padding-left: 10;
}

.el-buttom {
    margin: 10;
}
</style>